<template>
  <div class="my-container">
    <div class="my-header">
      <!-- 已登录 -->
      <div v-if="$store.state.user" class="header-my">
        <div class="my-info">
          <div class="ingo-left">
            <img src="../../assets/mobile.png" alt="">
            <span>{{userInfo.name}}</span>
          </div>
          <div class="info-right">
            <van-button  @click="$router.push({path:'/user/profile'})" size="mini" round type="default">编辑资料</van-button>
          </div>
        </div>
        <div class="my-nav">
          <van-grid :border="false">
            <van-grid-item text="文字">
              <div slot="text">
                <div>{{userInfo.follow_count}}</div>
                <div>头条</div>
              </div>
            </van-grid-item>
            <van-grid-item text="文字">
              <div slot="text">
                <div>{{userInfo.art_count}}</div>
                <div>文章</div>
              </div>
            </van-grid-item>
            <van-grid-item text="文字">
              <div slot="text">
                <div>{{userInfo.fans_count}}</div>
                <div>粉丝</div>
              </div>
            </van-grid-item>
            <van-grid-item text="文字">
              <div slot="text">
                <div>{{userInfo.like_count}}</div>
                <div>获赞</div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 未登录 -->
      <div v-else class="header-login">
        <ul class="logo">
          <li>
            <img src="../../assets/mobile.png" alt="">
          </li>
          <li @click="login">
            <span>登录</span>/
            <span>注册</span>
          </li>
        </ul>
      </div>
      <!-- <div class="header-user"></div> -->
    </div>
    <div class="my-nav">
      <!-- 导航-->
      <!-- <van-row type="flex" justify="center">
          <van-col span="12">
            <van-icon name="chat-o"  />
            <div>收藏</div>
          </van-col>
          <van-col span="12">
            <van-icon name="chat-o"  />
            <div>历史</div>
          </van-col>
      </van-row>-->

      <van-grid :column-num="2">
        <van-grid-item icon="photo-o" text="收藏"/>
        <van-grid-item icon="photo-o" text="历史"/>
      </van-grid>
    </div>
    <div class="my-list">
      <van-cell title="消息通知" is-link/>
      <van-cell title="小智同学" is-link/>
    </div>
    <van-button v-if="$store.state.user" class="logout" block type="default" @click="logout">退出登录</van-button>
  </div>
</template>
           
<script>
import { user_api } from '@/api/login'
import { SET_TOKEN } from '@/utils/storage.js'
export default {
  //  步骤分析：
  /* 
  1、获取用户信息
    需要携带token  请求拦截     axios
  */
  data() {
    return {
      userInfo: {}
    }
  },

  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const { data: res } = await user_api()
        //console.log(res, 777)
        this.userInfo = res.data
        SET_TOKEN('userInfo', res.data)
      } catch (err) {
        console.log(err)
      }
    },

    //退出登录
    logout() {
      //SET_TOKEN('USER_TOKEN', null)
      this.$store.commit('SET_USER',null)
      //this.$router.push('/login')
    },

    login() {
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped lang='less'>
.my-container {
  .my-header {
    .header-login {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 361px;
      background: url('../../assets/banner.png') no-repeat center;
      .logo {
        li {
          text-align: center;
          font-size: 30px;
          color: #fff;
          margin: 10px 0;
          img {
            width: 132px;
            height: 132px;
          }
          span {
          }
        }
      }
    }
    .header-my {
      position: relative;
      width: 100%;
      height: 361px;
      background: url('../../assets/banner.png');
      .my-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 80px 20px;
        color: #fff;
        font-size: 25px;
        .ingo-left {
          display: flex;
          align-items: center;

          img {
            width: 132px;
            height: 132px;
            margin: 0 20px;
          }
        }
        .ingo-right {
        }
      }

      .my-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /deep/.van-grid-item__content {
          background-color: transparent;
        }

        .van-grid-item {
          font-size: 26px;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
  .my-nav {
    .van-row {
      .van-col {
        text-align: center;
        font-size: 30px;
        margin: 20px;
        .van-icon {
          font-size: 60px;
          color: #eb5253;
        }
      }
    }

    /* 宫格 */
    /deep/.van-grid-item__content {
      padding: 20px 0;
      .van-icon {
        color: #eb5253;
      }
    }
  }
  .my-list {
  }

  .logout {
    color: red;
  }
}
</style>